<template>
	<view class="uiwu">
		<view class="uiwu-form">
			<view class="item uiwu-flex-align">
				<text>收货人</text>
				<input type="text" v-model="fromData.real_name" placeholder="请填写收货人姓名">
			</view>
			<view class="item uiwu-flex-align">
				<text>联系方式</text>
				<input type="number" v-model="fromData.phone" placeholder="请填写手机号码">
			</view>
			<view class="item uiwu-flex-align py-none">
				<text>所在地区</text>
				<uiwu-city-picker rangeKey="n" class="h-12" isArea :list="citylist" style="flex: 1;" @changes="changePick">
					<view class="uiwu-flex-align h-12">
						<view>{{ addressDetail }}</view>
						<!-- <input disabled type="text" v-model="addressDetail" placeholder="请选择省、市、区"> -->
						<uiwu-icon type="arrowright" style="width: auto;" color="#999"></uiwu-icon>
					</view>
				</uiwu-city-picker>
			</view>
			
			<view class="item uiwu-flex-align">
				<text>详细地址</text>
				<input type="text" v-model="fromData.detail" placeholder="请填写小区、街道、门牌号等信息">
			</view>
		</view>
		<view class="items uiwu-flex-space">
			<text>设置为默认</text>
			<switch :checked="checkedSwitch" :color="css.colorRed" style="transform: scale(0.7);"
				@change="ChangeAdress" />
		</view>
		<uiwu-footer>
			<view class="uiwu-footer">
				<view @tap="submit(fromData)" class="uiwu-footer-box uiwu-flex-center">完成</view>
			</view>
		</uiwu-footer>
	</view>
</template>

<script setup lang="ts">
import { addAddress, city_list, uiwu } from '@/api/interface/interface';
import { useCssStore } from '@/store/cssStore';
import { onLoad } from '@dcloudio/uni-app';
import { ref } from "vue";
const { css } = useCssStore();
const checkedSwitch = ref<any>(false);
const citylist = ref<Array<object>>([])
const addressDetail = ref<string>("")
const fromData = ref({
	address: {
		province: "北京市",
		city: "北京市",
		district: "东城区",
	},
	detail: "",
	is_default: 0,
	phone: "",
	real_name: ""
})
const getcity_list = async (): void => {
	const { data } = await city_list();
	citylist.value = data
}
const submit = async (data: object): void => {
	if (!data.real_name) return uiwu.toast('收货人名字不能为空')
	if (!uiwu.validateInput(data.phone, 'phone')) return
	if (!addressDetail.value) return uiwu.toast('请选择省市区')
	if (!data.detail) return uiwu.toast('请填写详细地址')
	const result = await addAddress(data)
	uiwu.toast('操作成功')
	setTimeout(() => {
		uni.navigateBack()
	}, 400)
}
const changePick = (e: object) => {
	fromData.value.address.city = e.city
	fromData.value.address.province = e.province
	fromData.value.address.district = e.area
	addressDetail.value = e.city_name
}
const ChangeAdress = ({ detail: { value } }): void => {
	fromData.value.is_default = value ? 1 : 0
}
onLoad(({ data }) => {
	if (data) {
		console.log(data)
		// 编辑模式数据回填渲染
		const e = JSON.parse(data)
		fromData.value.address.city = e.city
		fromData.value.address.province = e.province
		fromData.value.address.district = e.district
		addressDetail.value = `${e.province} ${e.city} ${e.district}`
		fromData.value.phone = e.phone
		fromData.value.real_name = e.real_name
		fromData.value.detail = e.detail
		fromData.value.is_default = e.is_default
		checkedSwitch.value = e.is_default ? true : false
		fromData.value.id = e.id
	}
	getcity_list()
})
</script>

<style lang="scss">
page {
	background-color: #F6F6F6;
}

.uiwu-form {
	padding: 0 24rpx;
	background-color: #fff;
	margin: 20rpx 0;

	.item {
		padding: 30rpx 0;
		border-bottom: 1rpx solid #F6F6F6;

		&:last-child {
			border-bottom: 0;
		}

		text {
			font-size: 28rpx;
			font-weight: bold;
			color: #231815;
			width: 140rpx;
		}

		input {
			flex: 1;
			font-size: 28rpx;
		}
		
		&.py-none {
			padding: 0;
		}
	}
}

.items {
	background-color: #fff;
	padding: 30rpx 24rpx;

	text {
		font-size: 28rpx;
		font-weight: bold;
		color: #231815;
	}
}

.uiwu-footer {
	width: 100%;
	padding: 19rpx 32rpx 5rpx;
	background-color: #fff;

	&-box {
		width: 100%;
		height: 80rpx;
		background: $qj-red;
		border-radius: 40rpx;
		font-size: 32rpx;
		font-weight: bold;
		color: #FFFFFF;
	}
}
</style>